.area_of_display {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: calc(100vh - 60px);
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    box-sizing: border-box;
}

.display_card {
    position: absolute;
    width: 25vw;
    height: 25vw;
    max-width: 300px;
    max-height: 300px;
    transition: all 0.4s ease-in-out;
}

.display_card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(46, 90, 172, 0.2);
}

.card_content {
    padding: 1.5rem;
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    white-space: normal;
}

.card_content img,
.card_content pre {
    max-width: 100%;      /* 限制图片/代码块最大宽度 */
    height: auto;         /* 保持比例缩放 */
    display: block;       /* 避免内联元素底部间隙 */
}

.card_content pre,
.card_content code,
.card_content a {
    white-space: pre-wrap;      /* 保留空格但允许换行 */
    word-break: break-all;       /* 强制长单词换行 */
    overflow-wrap: break-word;   /* 规范化的换行属性 */
    max-width: 100%;            /* 严格限制最大宽度 */
}

.card_content pre {
    background-color: #f8f9fa;  /* 添加背景色增强可读性 */
    padding: 0.5rem 1rem;
    border-radius: 4px;
    margin: 0 -1.5rem;          /* 抵消卡片padding的影响替换
    highlight: function(code, lang) {  // 添加代码高亮样式 */
}


.card_content::-webkit-scrollbar-track {
    background: #f1f1f1;
}
.card_content::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.card_icon {
    width: 40px;
    height: 40px;
    background: #2E5AAC;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-bottom: 1rem;
}

.card_title {
    color: #2E5AAC;
    font-size: 1.2rem;
    margin-bottom: 0.8rem;
    font-weight: 600;
}

.card_text {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* 添加渐变分割线 */
.display_card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #2E5AAC, #4A90E2);
}

/* 添加微光效果 */
.display_card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    transform: rotate(25deg);
    pointer-events: none;
}


/* 左上角 */
.display_card:nth-child(1) {
    top: 20%;
    left: 20%;
    transform: translate(-50%, -50%);
    animation: floatIn 0.6s ease forwards;
}

/* 右上角 */
.display_card:nth-child(2) {
    top: 20%;
    right: 20%;
    transform: translate(50%, -50%);
    animation: floatIn 0.6s ease forwards;
    animation-delay: 0.1s;
}

/* 左下角 */
.display_card:nth-child(3) {
    bottom: 10%;
    left: 20%;
    transform: translate(-50%, 50%);
    animation: floatIn 0.6s ease forwards;
    animation-delay: 0.2s;
}

/* 右下角 */
.display_card:nth-child(4) {
    bottom: 10%;
    right: 20%;
    transform: translate(50%, 50%);
    animation: floatIn 0.6s ease forwards;
    animation-delay: 0.3s;
}

/* 动画效果 */
@keyframes floatIn {
    0% {opacity: 0; transform: scale(0.8) translateY(0);}
    100% {opacity: 1; transform: scale(1) translateY(0);}
}

/* 悬停放大效果 */
.display_card:hover {
    transform: scale(1.05) translate(-50%, -50%);
    box-shadow: 0 15px 30px rgba(46, 90, 172, 0.25);
}

/* 添加光晕效果 */
.display_card::after {
    content: '';
    position: absolute;
    width: 150%;
    height: 150%;
    background: radial-gradient(circle, rgba(46,90,172,0.15) 0%, transparent 70%);
    top: -25%;
    left: -25%;
    border-radius: 50%;
    z-index: -1;
}

body {
    margin-top: 60px; /* 根据导航栏实际高度调整 */
}



/* 特殊字符处理 */
.card_content p, 
.card_content li, 
.card_content td {
    overflow-wrap: anywhere;    /* 允许任意位置换行 */
    hyphens: auto;             /* 自动添加连字符 */
}

/* 链接悬停显示完整路径 */
.card_content a:hover::after {
    content: attr(href);
    display: block;
    font-size: 0.8em;
    color: #666;
    margin-top: 0.25rem;
}